第 5 步 - 为小组件描述面板创建交互

在本教程的这一步骤中，您将实现在应用程序描述面板中处理交互的功能：

为在以相反顺序运行小组件高亮动画的 Widget Description Layer 节点中的 Back button 创建事件处理程序。
当用户点击Back button 时让显示小组件描述面板的Widget Description Layer 可见。

为小组件描述面板创建交互：

在 onProjectLoaded() 函数中为 Back button 添加事件处理程序。

virtual void onProjectLoaded() KZ_OVERRIDE
{
...     
    //为 Back button 添加处理程序。
    m_backButton->addMessageHandler(Button3D::PressedMessage, bind(&ProgrammerTutorialApplication::onBackButtonClicked, this, placeholders::_1));
}

在 ProgrammerTutorialApplication 类中的 onListBoxItemSelected() 函数后实现Back button 点击消息的事件处理程序。
当用户点击 Back button 时，事件处理程序以相反顺序运行摄像机和小组件高亮动画，并隐藏 Widget Description Layer 节点。
除了作为描述面板的容器外，Widget Description Layer 节点还会禁止在 Widget Grid List Box 节点可见时与之交互。
您首先运行动画，当动画完成时，会将节点可见性设置为 false 。接下来，将节点不透明度设置为 0.0f，使其透明。Widget Description Layer 节点隐藏，但其余可见，以阻止动画完成前的用户输入。

class ProgrammerTutorialApplication : public ExampleApplication
{
...  
    //来自 Back button 的 Button.Pressed 消息处理程序。
    //将选定列表框项移回其原来的位置。
    void onBackButtonClicked(ButtonConcept::PressedMessageArguments& /*messageArguments*/)
    {
        //取消选择之前选择的列表框项。
        m_widgetList->selectItem(nullopt);

        //移除旧回放，以重置值。
        removePlaybacks();

        //按相反方向开始摄像机的动画。
        PropertyAnimationTimelineSharedPtr cameraTimeline = PropertyAnimationTimeline::create(getDomain(), ".", Node3D::RenderTransformationProperty, m_cameraAnimation);
        cameraTimeline->setDirectionBehavior(Timeline::DirectionBehaviorReverse);
        SceneGraphTimelinePlaybackContext cameraContext(*m_camera);
        m_cameraPlayback = cameraTimeline->createPlayback(cameraContext);
        getDomain()->getRootTimelineClock()->addTimelinePlayback(m_cameraPlayback);

        //按相反方向开始选定项的动画化。
        PropertyAnimationTimelineSharedPtr selectedItemTimeline = PropertyAnimationTimeline::create(getDomain(), ".", Node3D::LayoutTransformationProperty, m_selectedItemAnimation);
        selectedItemTimeline->setDirectionBehavior(Timeline::DirectionBehaviorReverse);
        SceneGraphTimelinePlaybackContext selectedItemContext(*m_selectedItem);
        m_widgetHighlightPlayback = selectedItemTimeline->createPlayback(selectedItemContext);
        getDomain()->getRootTimelineClock()->addTimelinePlayback(m_widgetHighlightPlayback);

        //开始动画以隐藏 Widget Description Layer。
        PropertyAnimationTimelineSharedPtr widgetDescriptionVisibilityTimeline = PropertyAnimationTimeline::create(getDomain(), ".", Node::VisibleProperty, m_widgetDescriptionVisibilityAnimation);
        SceneGraphTimelinePlaybackContext listBoxContext(*m_widgetDescriptionNode);
        m_widgetDescriptionVisibilityPlayback = widgetDescriptionVisibilityTimeline->createPlayback(listBoxContext);
        getDomain()->getRootTimelineClock()->addTimelinePlayback(m_widgetDescriptionVisibilityPlayback);

        //使 Widget Description Layer 透明。
        m_widgetDescriptionNode->setProperty(Node::OpacityProperty, 0.0f);
    }
};

因为在上一步骤中，已将 Widget Description Layer 节点设置成透明，在事件处理程序中再次使其不透明，以使用户能选择这些小组件。

void onListBoxItemSelected(ListBoxConcept::itemSelectedMessageArguments& messageArguments)
{
...
    if (selectedItemIndex)
    {
    ...
        //通过将Widget Description Layer 设置为可见，显示小组件描述。
        if (m_widgetDescriptionVisibilityPlayback)
        {
        ...
            
        }
        ...
        //使Widget Description Layer 不透明。
        m_widgetDescriptionNode->setProperty(Node::OpacityProperty, 1.0f);
    }
}

在 onBackButtonClicked() 函数后，添加从时间线时钟移除旧回放以重置摄像机值的函数：

    //从时间线时钟移除旧回放。
    void removePlaybacks()
    {
        TimelineClockSharedPtr timelineClock = getDomain()->getRootTimelineClock();

        if (m_cameraPlayback)
        {
            timelineClock->removeTimelinePlayback(*m_cameraPlayback);
            m_cameraPlayback.reset();
        }

        if (m_widgetHighlightPlayback)
        {
            timelineClock->removeTimelinePlayback(*m_widgetHighlightPlayback);
            m_widgetHighlightPlayback.reset();
        }

        if (m_backButtonEnablePlayback)
        {
            timelineClock->removeTimelinePlayback(*m_backButtonEnablePlayback);
            m_backButtonEnablePlayback.reset();
        }

        if (m_widgetDescriptionVisibilityPlayback)
        {
            timelineClock->removeTimelinePlayback(*m_widgetDescriptionVisibilityPlayback);
            m_widgetDescriptionVisibilityPlayback.reset();
        }
    }

在 Visual Studio 中，为您的 Visual Studio 版本选择一个解决方案配置并运行应用程序。
例如，如果您仍在开发应用程序，选择GL_vs2015_Debug 配置。要创建 Kanzi 应用程序的产品版本，选择一个可用的发布配置。

当您点击Widget Description Layer 节点中的 Back button，应用程序将按相反的顺序播放高亮动画，并初始化让摄像机 (Camera) 节点返回的动画，以显示整个 Widget Grid List Box。注意，本教程中未介绍 Buy 按钮的功能。

< 上一步

下一步 >

打开导航